<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的工单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <include file="Index/common_css"/>
    <link href="__PUBLIC__/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/common/css/dataTables.bootstrap.css" rel="stylesheet">
    <!--分页样式-->
    <style type="text/css">
        div.green-black{padding:3px;margin:3px;text-align:center;}
        div.green-black a{border:#2c2c2c 1px solid;padding:2px 5px;background: #2c2c2c;color:#fff;margin:0 2px 0 0;text-decoration:none;}
        div.green-black a:hover{border:#aad83e 1px solid;background:#aad83e;color:#fff;}
        div.green-black a:active{border:#aad83e 1px solid;background:#aad83e;color:#fff;}
        div.green-black span.current{border:#aad83e 1px solid;padding:2px 5px;font-weight:bold;background:#aad83e;color:#fff;margin:0 2px 0 0;}
        div.green-black span.disabled{border:#f3f3f3 1px solid;padding:2px 5px;color:#ccc;margin:0 2px 0 0;}

        .Validform_checktip{padding-top:5px;display: inline-block;color:red;}
        .spiner-example{padding:0;}/*border:1px solid #CCC;*/
        .spiner-example img{width:100%;height:100%;}
        .balance{font-weight:bolder;color:red;font-size:18px;}

        .jstree-open > .jstree-anchor > .fa-folder:before {content: "\f07c";}
        .jstree-default .jstree-icon.none {width: 0;}

        #tree{width:100%;height:530px;margin-top:10px;border:none;}
        .pull-right{font-size:18px;border:1px solid #CCC;padding:0px 5px;}
        #nestable2{margin-top:40px;}
    </style>
</head>

<body class="gray-bg">
<div class="row">
    <div id="tab-12" class="tab-pane">
        <div class="panel-body">
            <a href="__URL__/downloadTree/id/{$msg.user_id}">
                <button type="button" class="btn btn-outline btn-info" style="float:right;margin-right:20px;">下载结构图</button>
            </a>
            <!--结构图-->
            <!--<div id="jstree1">{$tree}</div>-->
            <!--结构图2-->
            <!--<iframe id="tree" name="tree" src="__URL__/getTree/id/{$msg.user_id}"></iframe>-->
            <!--结构图3-->
            <div class="dd" id="nestable2">
                <ol class="dd-list">
                    <li class="dd-item" data-id="1">
                        <div class="dd-handle">
                            <span class="pull-right" onclick="getTree(this,'{$msg.user_id}',0)" flag="1"> + </span>
                            <span class="label label-info"><i class="fa fa-users"></i></span> MT4 : {$msg.user_id} Position : {$position.user_position} Class : 0
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<include file="Index/common_js"/>
<!-- Peity -->
<!--<script src="__PUBLIC__/admin/js/plugins/peity/jquery.peity.min.js"></script>-->
<!-- 自定义js -->
<script src="__PUBLIC__/admin/js/content.js?v=1.0.0"></script>
<script src="__PUBLIC__/admin/js/plugins/layer/laydate/laydate.js"></script>
<script src="__PUBLIC__/admin/js/plugins/validate/jquery.validate.min.js"></script>
<script src="__PUBLIC__/admin/js/plugins/validate/messages_zh.min.js"></script>
<script>
    function getTree(obj,id,clas){/*点击获取结构图,在用户量多的时候使用*/
        if($(obj).attr('flag')==1){
           var index = layer.load();
            $.ajax({
                type:"POST",
                url:"__URL__/getTree2",
                dataType:'json',
                data:{id:id},
                success:function(data){
                    //console.log(data);
                    //alert(JSON.stringify(data));return;
                    layer.close(index);
                    if(data.status==1){
                        $(obj).attr('flag',parseInt($(obj).attr('flag'))+1);
                        var str='';
                        clas++;
                        for(var i=0;i<data.msg.length;i++){
                            var clas1='label-warning';
                            var clas2='fa-child';
                            var btn='';
                            if(data.msg[i].hasChild==1){
                                clas1='label-info';
                                clas2='fa-users';
                                btn='<span class="pull-right" onclick="getTree(this,'+data.msg[i].user_id+','+clas+')" flag="1"> + </span>';
                            }
                            str+='<li class="dd-item" data-id="8">'+
                                '<div class="dd-handle">'+btn+
                                '<span class="label '+clas1+'"><i class="fa '+clas2+'"></i></span> MT4 : '+data.msg[i].user_id+' Position : '+data.msg[i].user_position+' Class : '+clas+
                                '</div>'+
                                '</li>';
                        }
                        $(obj).parent().parent().append('<ol class="dd-list">'+str+'</ol>');
                        $(obj).text('-');
                    }else{
                        layer.msg(data.msg,{icon: 2, time: 2000});
                    }
                },error:function(err){
                    //console.log(err);
                    layer.close(index);
                    layer.msg('网络错误',{icon: 2, time: 2000});
                }
            });
        }else if($(obj).attr('flag')==2){
            $(obj).parent('.dd-handle').nextAll('.dd-list').hide();
            $(obj).text('+');
            $(obj).attr('flag',3);
        }else{
            $(obj).parents('.dd-handle').nextAll('.dd-list').show();
            $(obj).text('-');
            $(obj).attr('flag',2);
        }


    }
</script>


</body>
</html>
